<template>
    <!--<el-dialog title="教师详情" v-model="teacherDeailVisible" :close-on-click-modal="false">-->
    <!---->

    <el-form label-width="100px" :model="stuMessage" ref="stuMessage">
    <div style="overflow: auto; width: 100%;">
        <table class="border-table">
           <!-- <tr>
                <td class="spec alt">学生相片</td>
                <td>
                    <img :src="stuMessage.stuPicture" class="avatar">
                </td>
            </tr>-->
            <tr>
                <td class="spec alt">学生姓名</td>
                <td>{{stuMessage.stuName}}</td>
                <td class="alt">学生学号</td>
                <td>{{stuMessage.stuId}}</td>
            </tr>
            <tr>
                <td class="spec alt">性别</td>
                <td>{{stuMessage.stuSex}}</td>
                <td class="alt">民族</td>
                <td>{{stuMessage.stuNation}}</td>
            </tr>
            <tr>
                <td class="spec alt">出生年月</td>
                <td>{{stuMessage.stuBirth}}</td>
                <td class="alt">证件号码</td>
                <td>{{stuMessage.stuCardId}}</td>
            </tr>
            <tr>
                <td class="spec alt">户籍所在地</td>
                <td>{{stuMessage.stuAddress}}</td>
                <td class="alt">在读学校</td>
                <td>{{stuMessage.stuSchool}}</td>
            </tr>
            <tr>
                <td class="spec alt">专业</td>
                <td>{{stuMessage.majorName}}</td>
                <td class="alt">入学日期</td>
                <td>{{stuMessage.studentDateStr}}</td>
            </tr>
            <tr>
                <td class="spec alt">学历</td>
                <td>{{stuMessage.stuEducation}}</td>
                <td class="alt">学历类型</td>
                <td>{{stuMessage.stuType}}</td>
            </tr>

            <tr>
                <td class="spec alt">联系电话</td>
                <td>{{stuMessage.stuTel}}</td>
                <td class="alt">联系邮箱</td>
                <td>{{stuMessage.stuEmail}}</td>
            </tr>

        </table>
    </div>
    <!--</el-dialog>-->
        </el-form>
</template>
<script>
    import{ getStuMsg } from '../../api/api'

    export default{
        data(){
            return {
//                teacherDeailVisible: false,

                stuMessage: {
                    stuName: '',
                    stuId: '',
                    stuSex: '',
                    stuNation: '',
                    stuBirth: '',
                    stuCardId:'',
                    stuAddress: '',
                    stuSchool:'',
                    majorName:'',
                    studentDateStr:'',
                    stuEducation:'',
                    stuType:'',
                    stuTel:'',
                    stuEmail:''
                },
            }
        },
        methods: {
            getData(){
                let para = {};

                getStuMsg(para).then((res) => {
                    console.log(res.resData);
                //如果后台发返回的时list集合就用
                this.stuMessage=res.resData[0];
                //如果后台发返回的是对象就用
//                    this.teacherDeail=res.resData;

            });
            }
        },
        mounted() {
            this.getData();
        }
    };
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 180px;
        height: 180px;
        display: block;
    }

    .border-table {
        border-collapse: collapse;
        border: none;
        width: 800px;
    }

    .border-table td {
        border: solid #dfe8ec 1px;
        background:#fff;
        font-size: 14px;
        padding: 6px 6px 6px 12px;
        color: #009966;
        text-align: center;
        line-height: 28px;
    }
    td.alt {
        background: #EFF2F7;
        color: #8492A6;
    }
</style>
